<!DOCTYPE html>
<html>
<head>
    <title>{{ data.city }} 气象可视化</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <style>
        :root {
            --primary: #2c3e50;
            --secondary: #3498db;
        }

        body {
            font-family: 'Lato', sans-serif;
            margin: 0;
            padding: 2rem;
            background: #ecf0f1;
        }

        .dashboard {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
        }

        .chart-panel {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }

        .chart-panel:hover {
            transform: translateY(-5px);
        }

        .chart-title {
            color: var(--primary);
            margin-bottom: 1rem;
            border-left: 4px solid var(--secondary);
            padding-left: 1rem;
        }

        #cityHeader {
            text-align: center;
            margin: 2rem 0;
            color: var(--primary);
        }
    </style>
</head>
<body>
    <h1 id="cityHeader">{{ data.city }} 气象可视化分析</h1>

    <div class="dashboard">
        <!-- 温度对比气泡图 -->
        <div class="chart-panel">
            <div class="chart-title">温度对比分析</div>
            <div id="bubbleChart" style="height:300px"></div>
        </div>

        <!-- 紫外线指数进度条 -->
        <div class="chart-panel">
            <div class="chart-title">紫外线强度指数</div>
            <div id="uviGauge" style="height:300px"></div>
        </div>

        <!-- 气象要素分布极坐标图 -->
        <div class="chart-panel">
            <div class="chart-title">气象要素分布</div>
            <div id="polarChart" style="height:300px"></div>
        </div>

        <!-- 天气概率玫瑰图 -->
        <div class="chart-panel">
            <div class="chart-title">天气概率分布</div>
            <div id="roseChart" style="height:300px"></div>
        </div>
    </div>

    <script>
        // 温度对比气泡图
        const bubbleChart = echarts.init(document.getElementById('bubbleChart'));
        bubbleChart.setOption({
            xAxis: { name: '实际温度 (°C)' },
            yAxis: { name: '体感温度 (°C)' },
            series: [{
                type: 'scatter',
                symbolSize: 30,
                data: [[{{ data.metrics.temp }}, {{ data.metrics.feels_like }]]],
                itemStyle: {
                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                        { offset: 0, color: '#3498db' },
                        { offset: 1, color: '#2980b9' }
                    ])
                }
            }]
        });

        // 紫外线指数仪表盘
        const uviGauge = echarts.init(document.getElementById('uviGauge'));
        uviGauge.setOption({
            series: [{
                type: 'gauge',
                axisLine: {
                    lineStyle: {
                        width: 20,
                        color: [
                            [0.3, '#2ecc71'],
                            [0.7, '#f1c40f'],
                            [1, '#e74c3c']
                        ]
                    }
                },
                detail: {
                    formatter: 'UV指数: {value}',
                    fontSize: 18
                },
                data: [{ value: {{ data.metrics.uvi }} }]
            }]
        });

        // 极坐标图
        const polarChart = echarts.init(document.getElementById('polarChart'));
        polarChart.setOption({
            angleAxis: {},
            radiusAxis: { type: 'category', data: ['湿度', '风速', '云量'] },
            polar: {},
            series: [{
                type: 'bar',
                data: [
                    { value: {{ data.metrics.humidity }}, name: '湿度' },
                    { value: {{ data.metrics.wind_speed }}, name: '风速' },
                    { value: {{ data.metrics.clouds }}, name: '云量' }
                ],
                coordinateSystem: 'polar'
            }]
        });

        // 玫瑰图
        const roseChart = echarts.init(document.getElementById('roseChart'));
        roseChart.setOption({
            series: [{
                type: 'pie',
                radius: [20, 100],
                roseType: 'area',
                data: [
                    { value: {{ data.metrics.pop }}, name: '降水概率' },
                    { value: 100 - {{ data.metrics.pop }}, name: '晴好概率' }
                ]
            }]
        });
    </script>
</body>
</html>